<template>
    <div class="container">
      <div id="exhart8" style="width: 100%; height: 100%"></div>
    </div>
  </template>
  <script>
  // import * as echarts from "echarts";
  import Highcharts from 'highcharts/highstock';
  import HighchartsMore from 'highcharts/highcharts-more';
  import HighchartsDrilldown from 'highcharts/modules/drilldown';
  import Highcharts3D from 'highcharts/highcharts-3d';
import { getCDLYFXByPFMarket,getCDFXByMarketATy } from '../../util/home';
  
  HighchartsMore(Highcharts);
  HighchartsDrilldown(Highcharts);
  Highcharts3D(Highcharts);
  export default {
    name: '',
    components: {},
    mixins: [],
    props: {},
    data() {
      return {
        option: {},
      };
    },
    computed: {},
    watch: {},
    mounted() {
      getCDFXByMarketATy().then((res) => {
        this.getInit(res.data.data);
      });
    },
    methods: {
      getInit(_data) {
        let data = [];
        _data.forEach((item) => {
          data.push([item.comeaddress, item.num]);
        });
        var chart = Highcharts.chart('exhart8', {
          chart: {
            type: 'pie',
            options3d: {
              enabled: true,
              alpha: 45,
            },
            backgroundColor: 'none',
            // margin: [0, 100, 0, 0],
            marginLeft: -220,
            style: {
              fontFamily: '',
              fontSize: '15px',
              color: '#fff',
            },
          },
          title: {
            text: null,
            style: {
              fontFamily: '',
              fontSize: '15px',
              color: '#fff',
            },
          },
          credits: {
            enabled: false,
          },
          legend: {
            borderRadiusL: '0',
            // layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 50,
            width: 200,
            itemWidth: 100,
            itemDistance: 0,
            labelFormatter: function() {
              return `${this.name} ${this.y.toFixed(2)}吨`;
            },
            floating: true,
            backgroundColor: 'none',
            shadow: true,
            itemStyle: {
              color: '#fff',
              fontSize:10,
            },
            symbolRadius: '0',
          },
          plotOptions: {
            pie: {
              innerSize: 90,
              depth: 55,
              showInLegend: true,
              dataLabels: {
                enabled: true,
                format: '{point.percentage:.2f} %',
                style: {
                  color: '#fff',
                },
              },
            },
          },
          series: [
            {
              name: '交易数量',
              data: data,
            },
          ],
        });
      },
    },
  };
  </script>
  <style lang="less" scoped>
  .container {
    height: 100%;
    display: flex;
  }
  </style>
  